<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <div>
                    <div class="colorBar"></div>
                    <div>{{ customer.customerInfo }}</div>
                </div>
                <i class="iconfont icon-zhanghao"></i>
            </div>
        </template>
        <div class="carddata">
            {{ customer.cardData }}
        </div>
        <div class="Comparedata">
            <div class="Compare">
                <div>较个月：</div>
                <div>{{ customer.monthComparisonPercentage }}
                    <el-icon v-if="showtop" :style="{ color: customer.monthComparisonColor }">
                        <CaretTop />
                    </el-icon>
                    <el-icon v-else :style="{ color: customer.yearComparisonColor }">
                        <CaretBottom />
                    </el-icon>
                </div>
            </div>
            <div class="Compare">
                <div>较去年同期：</div>
                <div>{{ customer.yearComparisonPercentage }}
                    <el-icon v-if="showbottom" :style="{ color: customer.monthComparisonColor }">
                        <CaretTop />
                    </el-icon>
                    <el-icon v-else :style="{ color: customer.yearComparisonColor }">
                        <CaretBottom />
                    </el-icon>
                </div>
            </div>
        </div>
    </el-card>
</template>
  
  

<script setup lang="ts">
import { ref } from "vue";

interface IProps {
    customerInfo: string
    cardData: string
    monthComparisonPercentage: number
    yearComparisonPercentage: number
    monthComparisonColor: string
    yearComparisonColor: string
    yearboolen: boolean
    monthboolen: boolean
    customer: any
}
const props = defineProps<IProps>()
const showtop = ref<boolean>(false)
const showbottom = ref<boolean>()
showtop.value = props.customer.monthboolen
showbottom.value = props.customer.yearboolen
</script>

<style lang="scss" scoped>
.el-card {
    margin-bottom: 20px;
    width: 100%;

    .el-card__header {
        width: 100%;
        border-bottom: 0;
        padding: 0;
        margin-left: 10px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-self: center;

        div {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-self: center;
        }

        .card-header {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;


            .colorBar {
                width: 4px;
                height: 15px;
                background-color: #367eea;
                margin-right: 10px;
            }
        }


    }

    .carddata {
        font-size: 20px;
        color: blue;
        margin: 10px 0;

    }

    .Comparedata {
        width: 100%;

        .Compare {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            :nth-child(2) {
                margin-right: 10px;
            }
        }
    }


}
</style>